<%--
  Created by IntelliJ IDEA.
  User: Lili_Could
  Date: 2025/9/27
  Time: 下午7:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>学生成绩管理系统 - 学生主页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="${pageContext.request.contextPath}/static/student.svg" type="image/x-icon">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/page/student/css/common.css">
</head>
<body>

<div class="container" id="student-app">
    <div class="loading" id="loading" v-show="loading">
        <div class="spinner"></div>
        <p>正在加载...</p>
    </div>

    <!-- 操作成功结果气泡提示 -->
    <div class="result-tip" id="result-tip" v-show="resultTip">
        <div class="tip-content">
            <span class="tip-icon"></span>
            <span class="tip-text">操作成功</span>
        </div>
    </div>

    <!-- 操作错误结果气泡提示 -->
    <div class="error-tip" id="error-tip" v-show="error">
        <div class="tip-content">
            <span class="tip-icon"></span>
            <span class="tip-text">{{error}}</span>
        </div>
    </div>

    <!-- 个人信息模态框 -->
    <div class="modal-overlay" v-show="studentInfoModal" @click="hideStudentInfo()">
        <div class="modal" id="student-info-modal" v-show="studentInfoModal" @click.stop>
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">个人信息</h2>
                    <button class="close-btn" @click="hideStudentInfo()">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="info-row">
                        <span class="info-label">学号:</span>
                        <span class="info-value">{{student.userNo}}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">姓名:</span>
                        <span class="info-value">{{student.name}}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">入学年份:</span>
                        <span class="info-value">20{{student.enrollmentYear}}年</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">学院:</span>
                        <span class="info-value">{{student.collegeName}}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">专业:</span>
                        <span class="info-value">{{student.majorName}}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">班级:</span>
                        <span class="info-value">{{student.className}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改密码模态框 -->
    <div class="modal-overlay" v-show="changePasswordModal" @click="hideChangePassword()">
        <div class="modal" id="change-password-modal" v-show="changePasswordModal" @click.stop>
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">修改密码</h2>
                    <button class="close-btn" @click="hideChangePassword()">&times;</button>
                </div>
                <div class="modal-body">
                    <form class="password-form">
                        <div class="form-group">
                            <label for="old-password">旧密码</label>
                            <input id="old-password" type="password" placeholder="请输入旧密码" v-model="oldPassword">
                        </div>
                        <div class="form-group">
                            <label for="new-password">新密码</label>
                            <input id="new-password" type="password" placeholder="请输入新密码" v-model="newPassword">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn-primary" @click="changePassword(${sessionScope.userNo})">修改密码</button>
                    <button class="btn-secondary" @click="hideChangePassword">取消</button>
                </div>
            </div>
        </div>
    </div>


    <header>
        <div class="logo">
            <img src="${pageContext.request.contextPath}/static/student.svg" alt="logo">
            <p>学生成绩查询</p>
        </div>
        <div class="user">
            <span>
                <a @click="showStudentInfo()">${sessionScope.userName}</a>
            </span>
            <a @click="showChangePassword()">修改密码</a>
            <button @click="logout">退出登录</button>
        </div>
    </header>

    <main>
        <label for="grade-search">搜索</label>
        <input type="search" name="search" id="grade-search" placeholder="请输入关键词查询">
        <button onclick="alert('功能开发中...')">查询成绩</button>
        <button @click="loadGrades(${sessionScope.userNo})">刷新</button>
        <table>
            <tr>
                <th>课程编号</th>
                <th>课程名称</th>
                <th>课程学分</th>
                <th>授课老师</th>
                <th>任课学期</th>
                <th>考试日期</th>
                <th>考试成绩</th>
                <th>录入时间</th>
                <th>更新时间</th>
            </tr>
            <tr v-if="!grades || grades.length === 0">
                <td colspan="9" style="text-align: center">暂无成绩数据</td>
            </tr>
            <tr v-for="grade in grades">
                <td>{{grade.courseCode}}</td>
                <td>{{grade.courseName}}</td>
                <td>{{grade.credit}}</td>
                <td>{{grade.teacherName}}</td>
                <td>{{grade.semester}}</td>
                <td>{{grade.examDate}}</td>
                <td v-if="grade.score >= 60">{{grade.score}}</td>
                <td v-else style="color: red">{{grade.score}}</td>
                <td>{{grade.createdAt}}</td>
                <td>{{grade.updatedAt}}</td>
            </tr>

        </table>
    </main>

    <footer>
        <div class="footer-content">
            <p>&copy; 2025简易学生成绩管理系统 | 技术支持：花椒关东煮</p>
            <p>联系电话：15570331235 | 邮箱：2023211001000210@ecjtu.edu.cn</p>
        </div>
    </footer>




</div>

<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script>
    // 创建Vue实例
    const {createApp} = Vue
    // 定义全局变量contextPath
    window.contextPath = "${pageContext.request.contextPath}"
    // 传递用户学号，便于首次进入时加载成绩信息
    window.userNo = "${sessionScope.userNo}"
</script>
<script src="${pageContext.request.contextPath}/page/student/js/main.js"></script>

</body>
</html>

